<template>
    <div>
        <div class="mui-card"  v-for="(item,index) in cars">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                  <mt-switch v-model="item.onOff" @change="changeSelect(item.id,item.onOff)"></mt-switch>
                  <img src="https://timgsa.baidu.com/timg?image&quality=80&size=b9999_10000&sec=1580711959772&di=cfc2b89b177d59cefb40d57aa365fbe6&imgtype=0&src=http%3A%2F%2Fcdn047.yun-img.com%2Fstatic%2Fupload%2Fwxttgou%2Fteam%2F20170425122349_38543.jpg" alt="">
                  <div class="info">
                      <h4>{{item.title}}</h4>
                      <span class="price">￥{{item.price}}</span>
                      <shopcarnum class="num-box" :n="item.count" :id="item.id"></shopcarnum>
                      <span class="del" @click="del(item.id,index)">删除</span>
                  </div>
                </div>
            </div>
        </div>
        <div class="mui-card">
            <div class="mui-card-content">
                <div class="mui-card-content-inner">
                    <div class="statistics">
                        <p>总计（不含运费）</p>
                        <p>已勾选商品
                            <span class="select">{{selectN}}</span>件，
                            总价:
                            <span class="total">￥{{price}}</span>
                         </p>
                    </div>
                    <div class="Settlement">
                        <mt-button type="danger">去结算</mt-button>
                    </div>
                </div>
            </div>
        </div>
       
    </div>
</template>

<script>
import shopcarnum from "./shopCarNum.vue"

export default {
    data(){
        return{
            onOff:true,
            cars:[]
        }
    },
    components:{
        shopcarnum
    },
   created() {
       this.cars = this.$store.state.good;
    },
    mounted(){
        mui(".num-box").numbox()
    },
    computed:{
        selectN(){
            var n=0;
            this.cars.forEach(item=>{
               if(item.onOff){
                   n+=parseInt(item.count)
               }
            })
            return n
        },
        price(){
            var m=0;
            this.cars.forEach(item=>{
                if(item.onOff){
                     m+=item.count*item.price
                }
            })
            return m
        }
    },
    methods:{
        changeSelect(id,val){
            this.$store.commit("updateSelect",{id,val})
        },
        del(id,index){
            this.cars.splice(index,1);
            this.$store.commit("remove",id)
        }
    }
}
</script>

<style  scoped>
 img{
     width: 50px
 }
 h4{
     font-size: 15px;
     font-weight: 800
 }
 .mui-card-content-inner{
     display: flex;
     align-items: center;
     padding: 10px;
     justify-content: space-between
     
 }
 .price{
     color: red;
     margin-right: 5px
 }
 .del{
     color: #26a2ff;
     margin-left: 5px
 }
 .select,.total{
     color: red;
     font-weight: 600
 }

</style>